<template>
<div>
  <fenheader></fenheader>
  <div class="zhongjian">
  <div class="liebiao">
    <ul>
      <!--
      v-for="(items,index) in biao"
      @click="doClick(index)"
      -->
      <li @click="doClick"><a >为你推荐</a></li>
      <li @click="doClick2"><a >面部护理</a></li>
      <li @click="doClick3"><a>底妆彩妆</a></li>
      <li @click="doClick4"><a>休闲零食</a></li>
      <li @click="doClick5"><a>身体护理</a></li>
      <li @click="doClick6"><a>美容美发</a></li>
      <li @click="doClick7"><a>生活用品</a></li>
      <li @click="doClick8"><a>个人护理</a></li>
      <li @click="doClick9"><a>保健养生</a></li>
      <li @click="doClick10"><a>时尚潮品</a></li>
      <li @click="doClick11"><a>母婴用品</a></li>
    </ul>
  </div>
  <div v-show="isTuijian" class="tuijian">
  <div class="xinde">
    <img src="../../assets/img/fenlei/xinde.png" alt="">
  </div>
  <div class="guoyou">
    <div class="zhiyou">
      <img src="../../assets/img/fenlei/huaban.jpg" alt="">
      <p>日本直邮</p>
    </div>
    <div class="zhiyou">
      <img src="../../assets/img/fenlei/nvshen.jpg" alt="">
      <p>美国直邮</p>
    </div>
    <div class="zhiyou">
      <img src="../../assets/img/fenlei/china.jpg" alt="">
      <p>中国直邮</p>
    </div>
    <div class="zhiyou">
      <img src="../../assets/img/fenlei/cao.jpg" alt="">
      <p>澳大利亚直邮</p>
    </div>
    <div class="zhiyou">
      <img src="../../assets/img/fenlei/qiao.jpg" alt="">
      <p>英国直邮</p>
    </div>
  </div>

  <div class="shopping">
    <div><span>热卖品类</span></div>
    <div v-for="liu in 6" @click="goHuli" class="zhiyou remai">
      <img src="../../assets/img/fenlei/bao.jpg" alt="">
      <p>名牌皮包</p>
    </div>
    <!--<div class="zhiyou remai">-->
      <!--<img src="../../assets/img/fenlei/bao.jpg" alt="">-->
      <!--<p>名牌皮包</p>-->
    <!--</div>-->
    <!--<div class="zhiyou remai">-->
      <!--<img src="../../assets/img/fenlei/bao.jpg" alt="">-->
      <!--<p>名牌皮包</p>-->
    <!--</div>-->
    <!--<div class="zhiyou remai">-->
      <!--<img src="../../assets/img/fenlei/bao.jpg" alt="">-->
      <!--<p>名牌皮包</p>-->
    <!--</div>-->
    <div class="zhiyou remai">
    <img src="../../assets/img/fenlei/bao.jpg" alt="">
    <p>名牌皮包</p>
  </div>
    <div class="zhiyou remai">
    <img src="../../assets/img/fenlei/bao.jpg" alt="">
    <p>名牌皮包</p>
  </div>


  </div>
  </div>
  <div v-show="isHuli" class="huli">
      <div class="xinde">
        <img src="../../assets/img/fenlei/mianbuhuli.png" alt="">
      </div>
      <div @click="goHuli" v-for="yier in 12"  class="zhiyou remai mianbuhuli">
        <img src="../../assets/img/fenlei/huazhuangpin.jpg" alt="">
        <p>洁面护理</p>
      </div>
    <!--
    <div class="zhiyou remai mianbuhuli">
      <img src="../../assets/img/fenlei/kouhong.jpg" alt="">
      <p>人气口红</p>
    </div>
    <div class="zhiyou remai mianbuhuli">
      <img src="../../assets/img/fenlei/bao.jpg" alt="">
      <p>洁面护理</p>
    </div>
    <div class="zhiyou remai mianbuhuli">
      <img src="../../assets/img/fenlei/huazhuangpin.jpg" alt="">
      <p>洁面护理</p>
    </div>
    <div class="zhiyou remai mianbuhuli">
      <img src="../../assets/img/fenlei/kouhong.jpg" alt="">
      <p>人气口红</p>
    </div>
    <div class="zhiyou remai mianbuhuli">
      <img src="../../assets/img/fenlei/bao.jpg" alt="">
      <p>洁面护理</p>
    </div>
    <div class="zhiyou remai mianbuhuli">
      <img src="../../assets/img/fenlei/huazhuangpin.jpg" alt="">
      <p>洁面护理</p>
    </div>
    <div class="zhiyou remai mianbuhuli">
      <img src="../../assets/img/fenlei/kouhong.jpg" alt="">
      <p>人气口红</p>
    </div>
    <div class="zhiyou remai mianbuhuli">
      <img src="../../assets/img/fenlei/bao.jpg" alt="">
      <p>洁面护理</p>
    </div>
    <div class="zhiyou remai mianbuhuli">
      <img src="../../assets/img/fenlei/huazhuangpin.jpg" alt="">
      <p>洁面护理</p>
    </div>
    <div class="zhiyou remai mianbuhuli">
      <img src="../../assets/img/fenlei/kouhong.jpg" alt="">
      <p>人气口红</p>
    </div>
    <div class="zhiyou remai mianbuhuli">
      <img src="../../assets/img/fenlei/bao.jpg" alt="">
      <p>洁面护理</p>
    </div>
    -->
  </div>
  </div>
  <router-view></router-view>
  <fenfooter></fenfooter>
</div>
</template>
<script>
  import fenheader from '../HyyHeader/header.vue'
  import fenfooter from '../HyyFooter/footer.vue'
 export default {
   data(){
     return{
       isTuijian:true,
       isHuli:false,
       /*biao:[
         '为你推荐',
         '面部护理',
         '底妆彩妆',
         '休闲零食',
         '身体护理',
         '美容美发',
         '生活用品',
         '个人护理',
         '保健养生',
         '时尚潮品',
         '母婴用品',
       ]*/
     }
   },
   methods:{
     doClick(){
//       this.$router.push({path:'/FenLei'})
         this.isTuijian=true;
         this.isHuli=false;
     },
     doClick2(){
//       this.$router.push({path:'/huli'})
       this.isTuijian=false;
       this.isHuli=true;
     },
     doClick3(){
//       this.$router.push({path:'/FenLei'})
       this.isTuijian=true;
       this.isHuli=false;
     },
     doClick4(){
//       this.$router.push({path:'/huli'})
       this.isTuijian=false;
       this.isHuli=true;
     },
     doClick5(){
//       this.$router.push({path:'/FenLei'})
       this.isTuijian=true;
       this.isHuli=false;
     },
     doClick6(){
//       this.$router.push({path:'/huli'})
       this.isTuijian=false;
       this.isHuli=true;
     },
     doClick7(){
//       this.$router.push({path:'/FenLei'})
       this.isTuijian=true;
       this.isHuli=false;
     },
     doClick8(){
//       this.$router.push({path:'/huli'})
       this.isTuijian=false;
       this.isHuli=true;
     },
     doClick9(){
//       this.$router.push({path:'/FenLei'})
       this.isTuijian=true;
       this.isHuli=false;
     },
     doClick10(){
//       this.$router.push({path:'/huli'})
       this.isTuijian=false;
       this.isHuli=true;
     },
     doClick11(){
//       this.$router.push({path:'/FenLei'})
       this.isTuijian=true;
       this.isHuli=false;
     },
     goHuli(){
       this.$router.push({path:'/MianBuHuli'})
     }
   },
   components:{
     fenheader,
     fenfooter
   }

 }

</script>
<style scoped>
  .zhongjian{
    margin-top: 0.5rem;
  }
  .liebiao{
    width: 30%;
    border-right: 1px solid #979997;
    float: left;
    padding-bottom: 3rem;
  }
  ul{
    list-style: none;
  }
  ul li{
    border-bottom: 1px solid silver;
  }
  ul li a{
    font-size: 0.7rem;
    display: block;
    margin: 0.4rem;
    text-align: center;
  }
  a:hover{
    width: 90%;
    color: red;
    border-right: 2px solid red;
  }
  li:hover{

  }
.tuijian{
  width: 69%;
  float: right;
  /*display: none;*/
}
  .xinde img{
    width: 90%;
    margin: 5%;
  }
  .guoyou{
    width: 100%;
    /*margin: 0.2rem;*/
    border-bottom: 1px solid gray;
  }
  .zhiyou{
    width: 30%;
    font-size: 0.5rem;
    display: inline-block;
    margin-left: 0.1rem;
    text-align: center;
    margin-bottom: 1rem;
  }
  .zhiyou img{
    width: 50%;
    margin:0.3rem auto;
    display:block  ;

  }
  .shopping{
    width: 100%;
  }
  .shopping span{
    /*width: 100%;*/
    margin: 0.5rem;
    font-size: 0.6rem;
  }
  .remai{
    width: 28%;
  }
  .remai img{
    width: 80%;
    margin:0.2rem auto;
    display:block;
  }
  .huli{
    width: 69%;
    float: right;
    /*display: none;*/
  }
  .mianbuhuli{
    width: 29%;
  }

</style>
